<template>
 <div class="Details">
   <van-swipe class="swipe" :autoplay="3000">
  <van-swipe-item v-for="(image, index) in StartData.imgs" :key="index">
    <img v-lazy="image.img" />
  </van-swipe-item>
</van-swipe>
 <div class="coupon-Box">
   <!-- 优惠券单元格 -->
<van-coupon-cell
  :coupons="coupons"
  :chosen-coupon="chosenCoupon"
  @click="showList = true"
/>
<!-- 优惠券列表 -->
<van-popup
  v-model="showList"
  round
  position="bottom"
  style="height: 90%; padding-top: 4px;"
>
  <van-coupon-list
    :coupons="coupons"
    :chosen-coupon="chosenCoupon"
    :disabled-coupons="disabledCoupons"
    @change="onChange"
    @exchange="onExchange"
  />
</van-popup>
</div>
<!-- 地址 -->
<div class="address_van" @click="addressClick">
  <div class="address_van_Name">填写详细地址信息</div> <van-icon class="address_van_Icon" name="arrow" />
</div>
<van-popup
  v-model="show"
  round
  position="bottom"
  :style="{ height: '70%' }"
>
<div class="address">
  <van-address-edit
   :area-list="areaList"
          show-postal
          show-delete
          show-set-default
          show-search-result
          :search-result="searchResult"
          :area-columns-placeholder="['请选省', '请选市', '请选区']"
          @save="onSave"
          @delete="onDelete"
          @change-detail="onChangeDetail"
/>
</div>
</van-popup>


<!-- 价格 -->
<div class="price_Box">
<div class="price_Name_Box"> <span class="price_Name_Title" >商品 ：</span> <span class="price_Text">{{StartData.title}}</span></div>
<div class="price_Number">
  <van-icon class="price_Number_Money_Icon" name="gold-coin" />
  <div class="Number">{{StartData.price}} </div>

</div>

</div>
<van-goods-action>
  <van-goods-action-icon icon="chat-o" text="客服" color="#07c160" />
  <van-goods-action-icon icon="cart-o" text="购物车" />
  <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
  <van-goods-action-button @click="AddToCart" type="warning" text="加入购物车" />
  <van-goods-action-button @click="BuyNow" type="danger" text="立即购买" />
</van-goods-action>
 </div>
</template>
<script>
const coupon = {
  available: 1,
  condition: '无使用门槛\n最多优惠12元',
  reason: '',
  value: 150,
  name: '优惠券名称',
  startAt: 1489104000,
  endAt: 1514592000,
  valueDesc: '1.5',
  unitDesc: '元'
};
        
export default {
  
  data(){ 
    const areaList = {
      province_list: {
        110000: "北京市",
        120000: "湖北省"
      },
      city_list: {
        110100: "北京市",
        110200: "县",
        120100: "武汉市",
        120200: "县"
      },
      county_list: {
        110101: "东城区",
        110102: "西城区",
        110105: "朝阳区",
        110106: "丰台区",
        120101: "江夏区",
        120102: "新技术经济开发区",
        120103: "汉口区",
        120104: "南开区",
        120105: "河北区"
        // ....
      }
    };
   return {

 key:1,

      chosenCoupon: -1,
      coupons: [coupon],
      disabledCoupons: [coupon],
      showList: false,
        areaList,
      searchResult: [],
      show:false,
      StartData:[],
      MoneyNumber:0,
      priceNumber:0,//商品价格
      address:'',//地址
      checked:'checked'
  
   }
  },
 components: {

 },
  beforeCreate:function (){

// 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。



  },
 created:function (){
    this.$store.state.Title = "详情";
    this.$store.state.return = "返回";
    this.$store.state.LeftArrow = true;
    this.$store.state.MenuShow = false
 // 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，el 属性目前尚不可用。

   this.start()

  },
  beforeMount:function (){

  },
  methods: {

// 在挂载开始之前被调用：相关的 render 函数首次被调用。

start(){


 console.log(this.$route.params.id )
 const THIS = this;
 THIS.axios.get(THIS.pathuiL + "allproducts/"+this.$route.params.id)
        .then(function(response) {
          THIS.StartData = response.data
        
        })
        .catch(function(err) {
          console.log(err);
        });
 },
  onChange(index) {

      this.showList = false;
      this.chosenCoupon = index;
      this.StartData.price -=Number(this.coupons[index].valueDesc)
      console.log(this.StartData.price)
    },
    onExchange(coupon) {
      console.log(coupon)
      this.coupons.push(coupon)
    },
      onSave(content) {
        this.address = content
        console.log(this.address)
        this.show=false
      this.Toast('保存');
    },
    onDelete() {
      this.Toast('删除');
    },
    onChangeDetail(val) {
      if (val) {
        this.searchResult = [{
          name: '黄龙万科中心',
          address: '杭州市西湖区'
        }];
      } else {
        this.searchResult = [];
      }
    },
    addressClick(){
      this.show= true
    },
    BuyNow(){
    
    
  const user = JSON.parse(localStorage.getItem("user"));
    console.log(this.address)
  if(this.address.length<=0){
     this.Toast('请填写地址')
  
  }else if(this.StartData.price > user.MoneyNumber) {
     this.Toast('余额不足')
  } else {
      const Money = user.MoneyNumber - this.StartData.price
     console.log(Money)
     const THIS = this
       THIS.axios
          .patch(THIS.pathuiL+"users/" + user.id, {
            MoneyNumber: Money
          })
          .then(function(response) {
             THIS.Toast(response.data.MoneyNumber);
            localStorage.setItem("user", JSON.stringify(response.data));
             THIS.$router.push( "/Logistics" );
           
          })
          .catch(function(error) {
            console.log(error);
          });
  }
    },
    AddToCart(){
      const user = JSON.parse(localStorage.getItem("user"));
     console.log(this.address)
      if(this.address.name){
        const address = this.address.province+'-'+this.address.city+'-'+this.address.county+''+this.address.addressDetail;
        const THIS = this
   
   
             THIS.axios
          .post(THIS.pathuiL+"MyShoppingCart/", {
            phone: THIS.address.phone,
            address: address,
            Img: THIS.StartData.imgs[0].img,
            usersid: user.id,
            Money: THIS.StartData.price,
            Title: THIS.StartData.title,
            checked:THIS.checked
          })
          .then(function(response) {
            console.log(response);
           
            const pathuiL = "/cart";
          
            THIS.$router.push( pathuiL );
          })
          .catch(function(error) {
            console.log(error);
          });
      }else {
 this.Toast('请填写地址')
      }

    }

  }

}

</script>

<style lang="scss"  scope>
.Details{
  flex: 1;
  background-color: whitesmoke;
  display: flex;
  flex-direction: column;
}
.address_van {
  width: 92%;
  padding: 0 4%;
  height: 1rem;
  background-color: white;
  border: 1px solid whitesmoke;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;

}
.van-cell__title {
  text-align: start;
  font-size: 0.4rem;
  letter-spacing: 2px;
  font-weight: 100;
  font-family: 'Times New Roman', Times, serif;
}
.van-cell__value {
  letter-spacing: 2px;
  font-size: 0.4rem;
  font-weight: 100;
  font-family: 'Times New Roman', Times, serif;
}
.address_van_Icon {
   color: #969799;
   font-size: 0.5rem;
}
.price_Box {
  width: 92%;
  height: 1rem;
  padding: 0 4%;
  line-height: 1rem;
  border: 1px solid whitesmoke;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  background-color: white;

}
.price_Number{

  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
}
.price_Number_Money_Icon{
  font-size: 0.5rem;
  color: #f40;
}
.Number {
  padding-left: 0.2rem;
  letter-spacing: 3px;
  font-size: 0.35rem;
  font-weight: 100;
  font-family: 'Times New Roman', Times, serif;
  color: red;
}
.swipe{
  height: 10rem;
}
.price_Text {
  color: #f40;
  letter-spacing: 2px;
  font-size: 0.38rem;
  font-weight: 100;
  font-family: 'Courier New', Courier, monospace;


}
.price_Name_Title,.address_van_Name {
  letter-spacing: 1px;
  font-size: 0.4rem;
  font-weight: 100;
  font-family: 'Times New Roman', Times, serif;
}
</style>